<template>
    <div>
        <el-table :data="pods" style="width: 100%">
            <!-- <el-table-column prop="index" label="index" width="100" align="center"></el-table-column> -->
            <el-table-column label="Index" width="100" align="center">
                <template #default="{ $index }">
                    {{ $index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="namespace" label="命名空间" width="120" align="center"></el-table-column>
            <el-table-column prop="name" label="名称" width="260" align="center"></el-table-column>
            <el-table-column prop="ip" label="IP 地址" width="120" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" width="120" align="center"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="180" align="center"></el-table-column>
            <el-table-column prop="update_time" label="更新时间" width="180" align="center"></el-table-column>
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索关键字" @keydown.enter="searchPods" />
                </template>
                <template #default="scope">
                    <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button size="small" type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
                    <el-button @click="showDetail(scope.row)" link type="primary">查看详情</el-button>
                    <!-- <el-button @click="deletePod(scope.row)" link type="danger">删除容器</el-button> -->

                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" title="容器详情" width="50%">
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">命名空间：</span> {{ dialogData.namespace }}
            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">名称：</span> {{ dialogData.name }}
            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">IP 地址：</span>{{ dialogData.ip }}
            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">状态：</span>{{ dialogData.status }}

            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">创建时间：</span>{{ dialogData.create_time }}
            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">更新时间：</span>{{ dialogData.update_time }}
            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">标签：</span>{{ dialogData.labels }}
            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">注释：</span>{{ dialogData.annotations }}
            </p>
            <p style="text-align: left;">
                <span style="width: 120px; display: inline-block;">容器：</span>
            </p>

            <el-table :data="dialogData.containers">
                <el-table-column prop="name" width="180" label="容器名称" align="center"></el-table-column>
                <el-table-column prop="image" width="360" label="镜像" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center"></el-table-column>
            </el-table>
        </el-dialog>



    </div>
</template>
<script>

import { ref, computed, onMounted, watch } from 'vue';
import { getPodsApi, getPodDetailApi, deletePodApi } from '@/api/clusterManagement';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    name: 'Pod',
    props: {
        namespace: {
            type: String,
            required: true
        }
    },
    setup(props) {
        const pods = ref([]);
        const search = ref(''); // 存储搜索关键字
        const dialogVisible = ref(false); // 控制对话框的显示状态
        const selectedPod = ref(null); // 存储选中的 pod 数据
        const dialogData = ref(null);
        const handleClose = (done) => {
            // 可以在此处添加关闭弹窗时的逻辑
            done()
        }

        const formattedData = computed(() => {
            const formatted = {};
            for (const key in dialogData.containers.status) {
                if (dialogData[key]) {
                    formatted[key] = JSON.stringify(dialogData[key]);
                } else {
                    formatted[key] = 'None';
                }
            }
            dialogData.containers.status = formatted
            // return formatted;
        });
        // 点击表格行时显示详情对话框
        const showDetail = (row) => {
            // 调用 API 获取容器详细信息
            getPodDetailApi({
                namespace: row.namespace,
                podName: row.name,
            }).then(response => {
                dialogData.value = response.data; // 将获取到的容器详细信息赋值给 dialogData 变量
                dialogVisible.value = true; // 显示详情对话框
            }).catch(error => {
                console.error('Error fetching pod detail:', error);
            });
        };
        const deletePod = (row) => {
            // 调用 API 删除容器
            ElMessageBox.confirm(`确认删除容器${row.name}吗？`).then(() => {

                deletePodApi({
                    namespace: row.namespace,
                    podName: row.name,
                }).then(response => {
                    console.log(response)
                    ElMessage.success('删除成功');
                    location.reload();
                    // dialogData.value = response.data; // 将获取到的容器详细信息赋值给 dialogData 变量
                    // dialogVisible.value = true; // 显示详情对话框
                }).catch(error => {
                    console.error('Error fetching pod detail:', error);
                ElMessage.error(    '删除失败')
                });
            }).catch(() => {
ElMessage.info('取消操作')                // 用户取消删除操作
            });
        };
        const fetchPods = () => {
            // 向后端发送请求获取 Pod 数据
            getPodsApi({ namespace: props.namespace })
                .then(response => {
                    pods.value = response.data;
                })
                .catch(error => {
                    console.error('Error fetching pods:', error);
                });
        };

        // 监听 namespace 的变化，当命名空间变化时重新获取 pod 数据
        watch(() => props.namespace, () => {
            fetchPods();
        });
        // 搜索 Pod
        const searchPods = () => {
            // 调用 getPodsApi 方法，并将命名空间和搜索关键字作为参数传递
            getPodsApi({ namespace: props.namespace, keyword: search.value })
                .then(response => {
                    pods.value = response.data;
                })
                .catch(error => {
                    console.error('Error fetching pods:', error);
                });
        };
        // 在组件加载时获取 Pod 数据
        onMounted(() => {
            fetchPods();
        });

        return {
            pods,
            search,
            searchPods,
            deletePod,
            showDetail,
            dialogVisible,
            selectedPod,
            dialogData,
            handleClose,
            getPodDetailApi,
            formattedData,
        };
    }
};
</script>

<style scoped>
/* 这里是你的样式 */
/* ... */
.el-table .cell {
    width: 120px;
    /* 120px 是你表头的宽度，根据你的实际需求进行调整 */
}
</style>